<template>
	<view class="content">
		<view class="vip-list">
			<view class="item" v-for="(item,index) in list" :key="index" 
			:style="{'borderColor':index==type_index?themeColor:'#ccc','background':index==type_index?themeColor+'20':'#eee',}" @click="typeChange(item,index)">
				<view class="item-t1">{{item.effectiveDuration}}</view>
				<view class="f-r-c item-t2" :style="{'color':themeColor,}">
					<text class="yuan">¥</text>
					<view class="num">{{item.benefitsAmount}}</view>
				</view>
			</view>
		
		   
		</view>
		<view class="t3" :style="{'color':themeColor,}">{{list[type_index]['title']}}</view>
		<view class="t4" :style="{'color':themeColor,}">会员权益</view>
		<view class="t3" >{{list[type_index]['memberBenefits']}}</view>
		<view class="f-r-c p32 foot-buttom" >
			<view class="submit bggradient f-r-c" @click="getPayParamByBack">{{userinfo.isVip?'续费':'立即开通'}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		computed: {
			themeColor() {
				return this.$themeColor;
			},
			
		},
		
		data(){
			return{
				userinfo:{
					userId:null,
					memberId:null,//会员id
					memberExpireDate:'',//会员到期时间
					referralCode:'',//会员推广码
					disable:0,//会员状态（0普通, 1会员, 2过期）
					isVip:false,//是否VIP 
				},
				list:[],
				type_index:0,
				
			}
		},
		onLoad() {
			this.getList();
			this.getUserInfo();
		},
		methods:{
			getUserInfo(){
			    let opts = {
			    	url: '/wx/getUserInfo',
			    	method: 'get'
			    };
			    let _self=this;
			    _self.$http(opts,{}).then(res => {
					console.log(res);
			    	if(res.code==200){
			            _self.userinfo=res.data;
			            uni.setStorageSync('userinfo',res.data);
			    	}
			    }) 
			},
			getList(){
				let opts={
				    url:'/authMarket/getRenewList',
				    method: 'get'
				};
				this.$http(opts,{}).then(res=>{ this.list=res.data;})
			},
			typeChange(item,index){
				this.type_index=index;
			},
			getPayParamByBack() {
				
			    let opts = {
			     url: '/wx/createWxOrder/' + this.list[this.type_index]['id'],
			     method: 'post'
			    };
				let that=this;
			    this.$http(opts, {}).then(res => {
			     console.log('backPay:' + res);
			     if (res.code == 200) {
			      // 调起微信支付
			      uni.requestPayment({
			       provider: 'wxpay', // 服务提提供商
			       timeStamp: res.data.timeStamp, // 时间戳
			       nonceStr: res.data.nonceStr, // 随机字符串
			       package: res.data.packageValue,
			       signType: res.data.signType, // 签名算法
			       paySign: res.data.paySign, // 签名
			       success: function(res) {
			        console.log('支付成功', res);
					// uni.showToast({
					// 	title:'开通会员成功',
					// 	icon:'success',
					// })
			        // 业务逻辑。。。
					that.getUserInfo();
					// 展示客服二维码
					that.showAdminCode();
			       },
			       fail: function(err) {
			        console.log('支付失败', err);
					uni.showToast({
						title:'开通会员失败',
						icon:'error',
					})
			       }
			      });
			     }
			    })
			},
			showAdminCode() {
				uni.showToast({
					title:'开通会员成功!扫描二维码添加客服,售后永保障!',
					icon:'none',
				})
				let that = this;
				setTimeout(function() {
					console.log('1秒的定时器');
					// 客服二维码
					let codeFilePath = uni.getStorageSync('configData').adminWxQrcode;
					let url=that.$prefix(codeFilePath);
					let list=[];
					list.push(url);
					uni.previewImage({
					     urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了     		
					     success: function(res) { 
					     },
					     complete: function(res) {
					        
					     },
					 });
				}, 2000);
			}
		},
		
	}
</script>

<style scoped lang="less">
	.content{
		.vip-list{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-start;
			.item{
				
				padding: 30rpx 50rpx;
				margin-right: 20rpx;
				
				border-radius: 10rpx;
				height: 200rpx;
				border: 1rpx #000 solid;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.item-t1{
					color: #000;
					font-size: 42rpx;
					font-weight: 500;
				}
				.item-t2{
					align-items: baseline;
					font-weight: 900;
					.yuan{
						font-size: 30rpx;
					}
					.num{
						font-size: 84rpx;
					}
				}
			}
		}
		.t3{
			font-size: 26rpx;
			margin: 20rpx 0  30rpx 0;
		}
		.t4{
			font-weight: 700;
			font-size: 32rpx;
		}
		.foot-buttom{
			width: 100%;
			box-sizing: border-box;
			position: fixed;
			bottom: 50rpx;
			left: 0;
			.submit {
				flex:1;
				border-radius: 50rpx;
				height: 80rpx;
				color: #fff;
			}
		}
	}
</style>